<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <img src="./images/kong.jpg" num="1" />
        <img src="./images/kong.jpg" num="2" />
        <img src="./images/kong.jpg" num="3" />
        <img src="./images/kong.jpg" num="4" />
        <img src="./images/kong.jpg" num="5" />
    </div>
    <script src="js/jquery-1.8.3.js"></script>
    <script>
        // 星星的三种状态： 默认kong 灰huise 黄hao
        // mouserover 移入
        // mouseout移出
        // click 点击
        // 获取全部img添加移入事件
        $('img').mouseover(function () {
            // 当移入的时候，全部应该清空
            $('img').attr('src','images/kong.jpg')
            $(this).attr('src','images/huise.jpg').prevAll('img').attr('src','images/huise.jpg')
            if($(this).attr('num') >= 3) {
                $(this).attr('src','images/hao.jpg').prevAll('img').attr('src','images/hao.jpg')
            }
        }).mouseout(function () {
            $('img').attr('src','images/kong.jpg')
            $('img[data-flag="select"]').attr('src','images/huise.jpg').prevAll('img').attr('src','images/huise.jpg')
            if($(this).attr('num') >= 3) {
                $('img[data-flag="select"]').attr('src','images/hao.jpg').prevAll('img').attr('src','images/hao.jpg')
            }
        }).click(function () {
            $('img[data-flag="select"]').removeAttr('data-flag');
            // 每次设置标识的时候，删除之前留下的标识
            $(this).attr('data-flag','select')
        })
    </script>
</body>

</html>